<template>
	<view class="content">
		<u-navbar :fixed="false" :title="titleName" :autoBack="true" :safeAreaInsetTop="true" leftIconColor="#fff"
			@leftClick="leftClick">
		</u-navbar>

		<m-tabs :list="TabData" v-model="TabActive" @click="ClickTab"
			:format="{TabText:'TabName',BackKey:'TabID'}"></m-tabs>

		<view class="x-bc" style="padding: 20rpx 30rpx;background-color: #f9f9fb;">
			<text style="font-size: 12px;">本地保存单据字段（不包含系统字段）</text>

			<button size="mini" type="primary" @click="DataInit">恢复默认</button>
		</view>

		<view class="MainBox">

			<u-cell style="background-color: #fff;" :title="item.colDesc" v-for="(item,index) in originListColumns"
				v-if="!item.isHidden">
				<template #value>
					<!-- <u-switch v-model="item.isShow" space="2" inactiveColor="#e5e5e5" :disabled="item.isTitle"
						@click="DisposeData">
					</u-switch> -->


					<switch :checked="item.isShow" :disabled="item.isTitle" @change="DisposeData(item,index)" />
				</template>
			</u-cell>

		</view>



	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				menuShow: false,
				formMenus: [{
					title: '刷新',
					icon: 'reload'
				}],
				titleName: '', // 标题名称
				originListColumns: [], //原始列配置
				TabData: [ // 标签栏数据
					{
						TabName: '单据列表',
						TabID: 1,
						MaxSelect: 15,
						FieldList: [],
					}
				],
				LocalTabData: [], // 记录进来后的原始数据


				FormSet: {
					TabName: '',
					MaxSelect: 0, // 字段开启上限
					TabID: null,
					FieldList: []
				},

				list: [{
					title: 'test1'
				}, {
					title: 'test2'
				}],
				TabActive: 0,
				isShow: false
			};
		},
		created() {
			//前台传参过来的列配置项
			var that = this;
			let menuObj = this.$store.state.Menu;
			var originListColumns = this.$store.state.FormColumnSetting;
			that.titleName = menuObj.APFunName + '字段设置';
			//当前对象showColumns是否存在，不存在则按显示字段显示
			if (uni.getStorageSync(menuObj.Para + '_ShowColumns')) {
				that.showColumns = uni.getStorageSync(menuObj.Para + '_ShowColumns');
				originListColumns.forEach(function(item) {
					if (that.showColumns.filter(function(item2) {
							return item2 == item.colName
						}).length > 0) {
						item.isShow = true;
					} else {
						item.isShow = false;
					}

				});
			} else {
				var showColumns = originListColumns.filter(function(item) {
					return !item.isHidden
				}).map(function(item) {
					return item.colName;
				});
				that.showColumns = showColumns;

				uni.setStorageSync(menuObj.Para + '_ShowColumns', showColumns);
				originListColumns.forEach(function(item) {
					item.isShow = !item.isHidden;
				});
			}
			that.originListColumns = JSON.parse(JSON.stringify(originListColumns));
			// console.log(JSON.stringify(that.originListColumns));
		},
		onBackPress(options) { // 监听页面返回
			console.log(options)
			// 监听返回键关闭、侧滑关闭
			if (options.from == 'backbutton') {
				this.leftClick();
			}
		},
		methods: {
			showPopup() {
				this.menuShow = true;
			},
			ClickTab(ItemID) { // 点击Tab栏
				let that = this;

				let FilterData = that.TabData.filter(item => {
					return item.TabID == ItemID
				})
				console.log(FilterData)


				if (FilterData.length) {
					Object.assign(this.FormSet, FilterData[0]);
				}

			},
			DataInit() { // 数据初始化
				var that = this;
				let menuObj = this.$store.state.Menu;
				var originListColumns = this.$store.state.FormColumnSetting;
				var showColumns = originListColumns.filter(function(item) {
					return !item.isHidden
				}).map(function(item) {
					return item.colName;
				});
				that.showColumns = showColumns;

				uni.setStorageSync(menuObj.Para + '_ShowColumns', showColumns);
				originListColumns.forEach(function(item) {
					item.isShow = !item.isHidden;
				});
				that.originListColumns = JSON.parse(JSON.stringify(originListColumns));
			},
			ChangeStatus(data) { // 开关选择器切换

			},
			// DisposeData(data) {
			// 	// 给switch增加的点击事件，避免无法找到对应的数据，无法操作
			// 	// 这里开关按钮触发时，就需要执行控制字段的操作
			// 	//刷新现有数据源
			// 	var that = this;
			// 	let menuObj = this.$store.state.Menu;
			// 	that.showColumns = that.originListColumns.filter(function(item) {
			// 		return item.isShow;
			// 	}).map(function(item) {
			// 		return item.colName
			// 	});
			// 	console.log(that.showColumns)
			// 	uni.setStorageSync(menuObj.Para + '_ShowColumns', that.showColumns);
			// },
			DisposeData(val, index) {
				// 给switch增加的点击事件，避免无法找到对应的数据，无法操作
				// 这里开关按钮触发时，就需要执行控制字段的操作
				//刷新现有数据源
				var that = this;

				that.originListColumns[index]['isShow'] = !that.originListColumns[index]['isShow'];

				let menuObj = this.$store.state.Menu;
				that.showColumns = that.originListColumns.filter(function(item) {
					return item.isShow;
				}).map(function(item) {
					return item.colName
				});
				console.log(that.showColumns)
				uni.setStorageSync(menuObj.Para + '_ShowColumns', that.showColumns);
			},
			isShowListColumns(objList) {
				var that = this;
				var isShow = true;
				if (objList.isHidden) {
					isShow = false;
				} else {
					if (that.showColumns.filter(function(item) {
							return item == objList.colName
						}).length == 0) {
						isShow = false;
					}
				}
				return isShow;
			},
			leftClick() {
				// console.log(this.originListColumns)
				let data = this.originListColumns || {};
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('reloadPage', data);
			}
		}
	}
</script>

<style lang="scss">
	uni-button {
		margin-left: initial !important;
		margin-right: initial !important;
	}

	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		// height: calc(100vh - 60px);
		// background-color: #f9f9f9;
		background-color: #f2f2f2;

		.MainBox {
			flex: 1;
			overflow: auto;
		}
	}

	.tab {
		font-size: 14px !important;
	}
</style>